<template>
  <div>
    <!-- 搜索条件 -->
    <el-card v-show="showQueryForm" class="form-card">
      <el-row v-loading="loading" :gutter="24" class="introduce">
        <el-col v-bind="attarSpan">
          <div class="info_list">商户名称：{{tableData.short_name}}</div>
        </el-col>
        <el-col v-bind="attarSpan">
          <div  class="info_list">商户号：{{tableData.mch_id}}</div>
        </el-col>
        <el-col v-bind="attarSpan">
          <div  class="info_list">登录名：{{tableData.account}}</div>
        </el-col>
        <el-col v-bind="attarSpan">
          <div  class="info_list">商户密钥：<span v-if="!tableData.oath || !oathShow" class="info_add" @click="handleKey">点击查看</span> <span v-else>{{tableData.oath}}</span></div>
        </el-col>
        <el-col  v-bind="attarSpan">
          <div  class="info_list">联系商务：{{tableData.name}}</div>
        </el-col>
        <el-col  v-bind="attarSpan">
          <div  class="info_list">联系人手机号：{{tableData.phone}}</div>
        </el-col>
        <el-col v-bind="attarSpan">
          <div  class="info_list">注册时间：{{timeStamp(tableData.create_time)}}</div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 列表数据 -->
    <el-card class="content-card">
      <div class="pay_info">支付通道信息</div>
      <el-row :gutter="24">
        <el-col v-bind="attarSpan1" v-for="item,index in list" :key="index">
          <div class="pay_box">
            <div class="pay_img">
              <img alt="" :src="item.image"/>

            </div>
              <div class="pay_name">{{item.name}}</div>
              <div class="pay_fee" @click="handleFee">我的费率 》</div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 弹窗操作 -->
    <key ref="formRef" @refresh="handleSearch"/>
    <fee ref="formRefFee" @refresh="handleSearch"></fee>
  </div>
</template>

<script lang="tsx" setup>
import { computed, onBeforeMount, reactive, ref } from 'vue';
import useLoading from '@/hooks/use-loading';
import TableColumn, { TableColumnData } from '@/components/table-column/index.vue';
import TableToolbar from '@/components/table-toolbar/index.vue';
import { TableInstance } from 'element-plus';
import useTable from '@/hooks/use-table.ts';
import { hasPermission } from '@/utils/permission.ts';
import { computedOperateWidth } from '@/utils';
import key from './key.vue';
import fee from './fee.vue';
import useTableSelection from '@/hooks/use-table-selection.ts';
import { QueryFormItemRule } from '@/components/query-form/constants.ts';
import { QueryForm } from '@/components/query-form';
import { storeAllianceList } from '@/api/api-store.ts';
import {merchantDelete, merchantList, merchantEntryList} from '@/api/api-store.ts';
import {timeStamp} from "@/utils/validate.ts";
defineOptions({name: 'store-custom-public-region-list'});
const attarSpan = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
};
const attarSpan1 = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 6,
  xl: 4,
};
// 查询
const queryFormData = reactive({
  name: undefined,
  code: undefined,
});
const queryFormRef = ref<InstanceType<typeof QueryForm>>();
const queryFormItems = ref<QueryFormItemRule[]>([
  {type: 'input', prop: 'name', label: '名称', placeholder: '请输入名称', clearable: true,},
  {type: 'input', prop: 'code', label: '编码', placeholder: '请输入编码', clearable: true,},
]);

// 列表数据
const tableRef = ref<TableInstance>();
const tableData = ref<any[]>([]);
const totalCount = ref(0);
const oathShow=ref()
// 操作区域宽度计算
const operateWidth = computed(() => {
  let count = 0
  if (hasPermission('store:alliance:info')) count += 1
  if (hasPermission('store:alliance:update')) count += 1
  return computedOperateWidth(count);
});

// 列设置
const columns = ref<TableColumnData[]>([
  {prop: 'id', label: '编号', width: 105, align: 'center'},
  {prop: 'name', label: '名称', minWidth: 180, align: 'center', sortable: 'custom',},
  {prop: 'code', label: '编码', minWidth: 145, align: 'center', sortable: 'custom',},
  {prop: 'remark', label: '备注', minWidth: 300, align: 'center'},
  {prop: 'create_time', label: '创建时间', width: 180, align: 'center', sortable: 'custom', render: (scope, val) => <span>{val || '-'}</span>},
  {prop: 'update_time', label: '更新时间', width: 180, align: 'center', sortable: 'custom', render: (scope, val) => <span>{val || '-'}</span>},
]);

onBeforeMount(() => {
  if (operateWidth.value > 0) {
    columns.value.push({prop: 'operations', label: '操作', fixed: 'right', width: operateWidth.value, align: 'center', headerAlign: 'center'},)
  }
});

const [loading, setLoading] = useLoading(false);
const {tableMethods, tableState} = useTable(() =>fetchDataList(), queryFormRef, true, true);
const {size, stripe, showQueryForm, pageQuery, pageSizes} = tableState;
const {handleSizeChange, handleCurrentChange, handleSortChange, handleResetForm} = tableMethods;
const {handleSelectChange, handleSelectAll, multipleSelection, clearSelection} = useTableSelection(tableData, tableRef);
const list=ref([])
// 数据查询
const fetchDataList = async () => {
  setLoading(true);
  try {
    // 查询数据
    const {body} = await merchantList({
      action:'info',
      ...queryFormData,
    });
    // 结果转换
    tableData.value = body;
    // console.log(tableData.value)
    oathShow.value=localStorage.getItem('oathShow')
    // totalCount.value = data.pages.total_count;
  } catch (err) {
  } finally {
    setLoading(false);
  }
  try{
    const {body}= await  merchantEntryList({action:'channel'})
    list.value=body
  } catch (err){

  }
};

// 刷新数据
const handleSearch = () => {
  fetchDataList();
};

// 重置查询条件
const handleResetQueryForm = () => {
  clearSelection();
  handleResetForm();
};

/** 添加/修改操作 */
const formRef = ref<any>()
const handleKey = () => {
  formRef.value?.open()
};
const formRefFee=ref<any>()
const handleFee=(id:any)=>{
  formRefFee.value?.open(id)
}
</script>

<style lang="scss" scoped>
.form-card{
  padding:10px 0 0px 0;
}
.info_list{
  margin-bottom: 20px;
}
.content-card{
  //width: 95%;
  //margin: 0 auto;
  padding: 0 54px;
  min-height: 70vh;
}
.info_add{
  text-decoration-line: underline;
  font-weight: 500;
  font-size: 14px;
  color: #2085FF;
  cursor: pointer;
}
.pay_info{
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: rgba(0,0,0,0.85);
}
.pay_box{
  width: 100%;
  margin-top: 32px;
  .pay_img{
    //width: 158px;
    //height: 112px;
    padding: 35px 0;
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 0px rgba(210,210,210,0.5);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    img{
      width:80px;
      min-height: 112px;
    }
  }
  .pay_name{
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: rgba(0,0,0,0.85);
    line-height: 24px;
    margin-top: 10px;
    margin-bottom: 7px;
  }
  .pay_fee{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    cursor: pointer;
    text-align: center;
  }
}
</style>
